<template>
  <section>
    <el-button size="mini" type="primary" @click="addBtn">+</el-button>
    <el-tree :data="indexList" default-expand-all :expand-on-click-node="false" :props="defaultProps">
      <div class="custom-tree-node" slot-scope="{ node, data }">
        <div style="font-size: 15px;font-weight: bold">
          <el-input size="mini" style="width: 100px" v-if="data.edit" v-model="data.name" placeholder="输入名称"></el-input>
          <span v-else>{{ data.name }}</span>
        </div>
        <span style="color: #8b8b8b;">
          <el-input size="mini" style="width: 100px" v-if="data.edit" v-model="data.description" placeholder="输入描述"></el-input>
          <span v-else>{{ data.description }}</span>
        </span>
        <span v-if="data.edit">
          <i class="el-icon-check" @click="confirm(data)"  />
          <i class="el-icon-minus" @click="cancel(node,data)"  />
        </span>
        <span v-else>
          <i class="el-icon-edit" @click="editBtn(data)"/>
          <i class="el-icon-plus" @click="append(data)"/>
          <i class="el-icon-close" @click="remove(node, data)"/>
        </span>
      </div>
    </el-tree>
  </section>
</template>

<script>
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'
  export default {
    name: "index",
    props:['tacticsId'],
    data(){
      return{
        indexList:null,
        defaultProps:{
          children: 'childrens',
          label: 'id'
        }
      }
    },
    watch:{
      tacticsId(nv,ov){
        this.init(nv)
      }
    },
    created(){
      this.init(this.tacticsId)
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      init(tacticsId){
        console.log('没？？？',tacticsId)
        if(tacticsId) this.getIndexList(tacticsId)
        else this.indexList=[]
      },
      getIndexList(tacticsId){
        this.fetch({name:"getTacticsIndexList",data:{tacticsId}})
          .then(res=>{
            console.log('获取该策略下的指标-------',res)
            this.indexList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addBtn(){//parentId
        let tmp={tacticsId:this.tacticsId,name:'',description:'',data:{},edit:true}
        console.log('看看参数-----',tmp)
        this.indexList.push(tmp)
      },
      editBtn(data){
        if(!data.edit){
          Vue.set(data,'edit',true)
          return
        }
        data.edit=!data.edit
      },
      confirm(data){
        console.log('data是啥-----',data)
        if(data.id) this.updateTacticsIndex(data)
        else this.createTacticsIndex(data)
      },
      cancel(node,data){
        if(data.id) data.edit=false
        else {
          console.log('取消？',node)
          let parent = node.parent
          let children = parent.data.childrens || parent.data
          const index = children.findIndex(d => d.id === data.id)
          children.splice(index, 1);
        }
      },
      append(data){
        let newChild = {name:'', parentId:data.id,description:'',edit:true}
        if(!data.childrens){
          Vue.set(data, 'childrens', [])
        }
        data.childrens.push(newChild)
        console.log(this.indexList)
      },
      remove(node, data){
        console.log('remove----',node,data)
        if(data.id){
          this.deleteFamilyTacticsIndex(data.id)
        }else {
          this.$message({type:'error',message:'该指标无id，请刷新。'})
        }
      },
      deleteFamilyTacticsIndex(id){
        this.$confirm('确认删除该指标，及其下设指标？')
          .then(()=> {
            this.fetch({name:"deleteFamilyTacticsIndex",data:{id}})
              .then(res=>{
                console.log('删除成功----------')
                this.init(this.tacticsId)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      confirmBtn(row){
        if(this.tacticsId) this.createTacticsIndex(row)
        else {
          console.log('先创建',row)
          row.edit=false
        }
      },
      createTacticsIndex(data){
        this.fetch({name:"createTacticsIndex",data})
          .then(res=>{
            console.log('创建成功-------',res)
            data.edit=false
            this.init(this.tacticsId)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateTacticsIndex(data){
        this.fetch({name:"updateTacticsIndex",data})
          .then(res=>{
            console.log('更新成功-------',res)
            this.$message({type:'success',message:'更新成功！'})
            data.edit=false
            this.init(this.tacticsId)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      delBtn(scope){
      }
    }
  }
</script>

<style scoped>
.custom-tree-node{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  width: 100%;
  /*border: 1px solid red;*/
}
  .el-icon-close{
    color: red;
  }
</style>
